<%@page import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" href="img/Cart01/awesome/css/font-awesome.min.css" type="text/css"/>
    <style>
        .img_div{
            margin:20px;
            border: solid 2px gray;
            width: 150px;
            height: 150px;
            text-align: center;
        }
        td{
            text-align: center;
        }
    </style>
</head>
<body id="m-Cart01">
<div id="header">
    <div class="clearfix" id="headerTop">
        <div id="left">
            <select>
                <option>USA</option>
                <option>UK</option>
                <option>CN</option>
            </select>
            <span><a href="#">DAILDY DEALS</a></span>
            <span><a href="#">DAILDY DEALS</a></span>
            <span><a href="#">DAILDY DEALS</a></span>
            <span><a href="#">DAILDY DEALS</a></span>
        </div>
        <div id="right">
            <c:choose>
                <c:when test="${empty sessionScope.user}">
                    <span id="user"><a href="<c:url value="/jsps/user/login.jsp" />"><i class="fa fa-user"></i>登录</a></span>
                    <span id="shopcar"><a href="<c:url value='/regesit.jsp'/>"><i class="fa fa-shopping-cart"></i>注册</a></span>
                </c:when>
                <c:otherwise>
                    <span id="user"><i class="fa fa-user"></i>${user.getUsername()}</span>
                    <span id="shopcar"><a href="<c:url value='/UserServlet?method=quit'/>"><i class="fa fa-shopping-cart"></i>退出</a></span>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
    <div id="headerMain" class="clearfix">
        <img src="http://ozz8m4qhr.bkt.clouddn.com/loge.png" width="59" height="24" id="loge">
        <ul id="nav" class="clearfix">
            <li class="navLi">
                <div class="navDiv">
                    <a href="<c:url value='/ProductServlet?method=findByCid&cid=1' />">
                        WOMEN<i class="fa fa-angle-down"></i>
                    </a>
                </div>
            </li>
            <li class="navLi">
                <div class="navDiv">
                    <a href="<c:url value='/ProductServlet?method=findByCid&cid=2'/>">
                        MAN<i class="fa fa-angle-down"></i>
                    </a>
                </div>
            </li>
            <li class="navLi">
                <div class="navDiv">
                    <a href="<c:url value='/ProductServlet?method=findByCid&cid=3'/>">
                        KIDS<i class="fa fa-angle-down"></i>
                    </a>
                </div>
            </li>
            <li class="navLi">
                <div class="navDiv">
                    <a href="<c:url value="/cart.jsp"/>">
                        我的购物车<i class="fa fa-angle-down"></i>
                    </a>
                </div>
            </li>
        </ul>
        <div id="search">
            <span id="searchSpan1">LIVE FILLING-ROOM</span>
            <span id="searchSpan2"><span>ECO</span>FRIENDLY</span>
            <i class="fa fa-search"></i>
        </div>
    </div>
</div>
<div class="banner">
    <div><a href="#">10% student Discount ＞</a></div>
    <div><a href="#">$ 9.95 - unlimited next-day delivery for 1 yr  ＞</a></div>
    <div><a href="#">Rectangle 1 copy 5  ＞</a></div>
</div>
<div class="section">
    <p id="go"><a href="#" class="go1">HOMEPAGE  /  </a><a class="go2" href="#">BASKET</a></p>
    <div class="section_top">
        <h2 class="box">我的购物车</h2>
        <h3><a href="<c:url value='/CartServlet?method=clear'/>" style="color: blue;">清空购物车</a></h3>
    </div>
            <!--购物车展示-->
    <div class="clothdetail" >
        <c:choose>
            <%-- 如果没有车，或车的内容集合为0长 --%>
            <c:when test="${empty sessionScope.cart}">
                <img src="http://ozz8m4qhr.bkt.clouddn.com/cart.png" width="300"/>
            </c:when>
            <c:otherwise>
                <table border="1" width="100%" cellspacing="0" background="black">
                    <tr>
                        <th>图片</th>
                        <th>商品</th>
                        <th>款式</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>

                    <c:forEach items="${sessionScope.cart.getCartItem() }" var="cartItem">
                        <tr>
                            <td><div class="img_div"><img src="${cartItem.product.getImgurl()}"/></div></td>
                            <td>${cartItem.product.pname }</td>
                            <td>${cartItem.size}</td>
                            <td>${cartItem.product.price}元</td>
                            <td>${cartItem.count}</td>
                            <td>${cartItem.subtotal}元</td>
                            <td><a href="<c:url value='/CartServlet?method=delete&pid=${cartItem.product.pid }'/>">删除</a></td>
                        </tr>
                    </c:forEach>


                    <tr>
                        <td colspan="7" align="right" style="font-size: 15pt; font-weight: 900">
                            合计：${sessionScope.cart.getToatal() }元
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7" align="right" style="font-size: 20pt; font-weight: 900">
                            <a style="color: blue;" href="<c:url value="/OrderServlet?method=add" />">一键购买</a>
                        </td>
                    </tr>
                </table>
            </c:otherwise>
        </c:choose>

    </div>
</div>
<div class="section1">
    <h2 class="box">YOUR MAY ALSO LIKE</h2>
    <div id="clothes_get"></div>
    <script type="text/html" id="clothes_pass">
        {{each cloth as value index}}
        <div id="{{value.id1}}">
            <img src="{{value.imgPath}}">
            <p>{{value.title}}</p>
            <span>{{value.name}}</span>
            <span class="box_money">${{value.natural}}</span>
        </div>
        {{/each}}
    </script>
</div>
<div id="common-footer">
    <div id="footerTop">
        <ul id="list" class="clearfix">
            <li>
                <p>QUESTIONS?</p>
                <p>Help</p>
                <p>Track Order</p>
                <p>Returns</p>
            </li>
            <li>
                <p>WHAT'S IN STORE</p>
                <p>Help</p>
                <p>Track Order</p>
                <p>Returns</p>
            </li>
            <li>
                <p>MORE ABOUT</p>
                <p>Help</p>
                <p>Track Order</p>
                <p>Returns</p>
            </li>
            <li>
                <p>QUESTIONS?</p>
                <p>Help</p>
                <p>Track Order</p>
                <p>Returns</p>
            </li>
            <li>
                <p>MORE ABOUT</p>
                <p>Help</p>
                <p>Track Order</p>
                <p>Returns</p>
            </li>
        </ul>

        <p id="check">SHOPPING TO
            <select>
                <option>USA</option>
            </select>
        </p>
        <img src="img/Product/footer.jpg" width="388" height="22">
    </div>
    <div id="footerBottom">
        <span id="span1">
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
            <span>PRIVACY & COOKIIES</span>
        </span><br>
        <span id="span2">this namsssw sswxzsja sjjcvud  skkvis</span><br>
        <span>
            <i class="fa fa-facebook"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-google"></i>
            <i class="fa fa-linkedin"></i>
        </span>
    </div>
</div>
</body>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/template-web.js"></script>
<script src="js/module/Cart01.js"></script>
<script src="js/lib/velocity.min.js"></script>
</html>